<template>
  <div align="center">
    <h1>评价问诊服务</h1>
    <!-- 文字评价 -->
    <textarea v-model="textReview" placeholder="请输入您对医生的评价" style="width: 360px ;height: 260px"></textarea>

    <!-- 星级评价 -->
    <h3>星级评价：</h3>
    <div class="star-rating">
      <span>医生专业度:</span>
      <span
        v-for="star in stars"
        :key="star"
        :class="{ 'filled': star <= rating }"
        @click="setRating(star)"
      >
        ★
      </span>
    </div>
    <div class="star-rating">
      <span>服务满意度:</span>
      <span
        v-for="star in starsTwo"
        :key="star"
        :class="{ 'filled': star <= ratingTwo }"
        @click="setRatingTwo(star)"
      >
        ★
      </span>
    </div>

    <!-- 提交按钮 -->
    <button @click="submitReview">提交评价</button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { insertEvaluate } from '@/api/mine/mine'

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      evaluate:{
        evaluateDoctor:'',
        evaluateInfo:'',
        evaluateDegree:'',
        evaluateServe:''
      },
      textReview: '',
      rating: 0, // 初始星级评价为0
      ratingTwo: 0, // 初始星级评价为0
      stars: [1, 2, 3, 4, 5], // 星级数组，用于循环显示星级
      starsTwo: [1, 2, 3, 4, 5] // 星级数组，用于循环显示星级
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {


    setRating(star) {
      this.rating = star // 设置星级评价
    },
    //setRatingTwo
    setRatingTwo(star) {
      this.ratingTwo = star // 设置星级评价
    },
    submitReview() {
      this.evaluate.evaluateDoctor ="张三"
      this.evaluate.evaluateInfo =this.textReview
      this.evaluate.evaluateDegree =this.rating
      this.evaluate.evaluateServe =this.ratingTwo
      console.log(this.evaluate)
      insertEvaluate(this.evaluate).then(res => {
        //console.log(res)
        this.$router.push({ path: '/mine/gift', query: { evaluateDoctor: this.evaluate.evaluateDoctor } })
      })
      // 提交后可以重置表单
      this.textReview = ''
      this.rating = 0
      this.ratingTwo = 0
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>
.star-rating {
  font-size: 35px; /* 调整星级评价的字体大小 */
}

.star-rating .filled {
  color: orange;
}
</style>
